<!--
 * new page
 * @author: sunYihui
 * @since: 2024-08-30
 * AdvertisementView.vue
-->
<template>
  <div class="body">
    <div class="title">图片列表</div>
    <Table ref="userTable" v-bind="tableConfig">
      <template #search="{ searchSubmit, params }">
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item label="位置">
            <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
              <el-option label="处理完成" value="3" />
              <el-option label="正在处理" value="2" />
              <el-option label="等待处理" value="1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button class="search" type="primary" @click="searchSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- 位置 -->
      <template #typeid="{ scope }">
        <div> {{ scope.row.typeid == 1 ? 'APP生活门店' : 'APP轮播图' }}</div>
      </template>
    <!-- 是否显示 -->
      <template #enabled="{ scope }">
        <div> {{ scope.row.enabled == 1 ? '显示' : '不显示' }}</div>
      </template>
      
      <template #buttons="{ deleteAllHandle }">
        <el-button @click="add" type="primary">添加</el-button>
        <el-button class="del" @click="deleteAllHandle" type="danger">批量删除</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary">修改</el-button>
        <el-button class="delete" @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    </Table>
    <Add @close="closeHandle" v-bind="updateData" v-if="dialogVisible"></Add>
  </div>
</template>
<script lang='ts' setup>
import Table from '../../components/table/TableView.vue'
import { tableConfig } from './Advertisement'
import { ref, reactive } from 'vue'
import Add from '../../components/advertisement/AddView.vue'

//通过ref获取表格实例来调用写在表格里面的方法
const userTable = ref<any>();

let dialogVisible = ref(false)

const closeHandle = (val: boolean) => {
  dialogVisible.value = false;
  val && userTable.value.getData()  
}

const add = () => {
  dialogVisible.value = true;

}
const updateData = reactive({
  id: null,
  title: '',
  picture: '',
  sort: null,
  typeid: null,
  url: null,
  enabled: null,
})

const edit = (val: any) => {
  console.log(8686, val);

  Object.assign(updateData, val)
  dialogVisible.value = true;
}

</script>
<style scoped lang="less">
@import url(../../assets/styles/baseCss/base.css);
</style>